<!-- 旅行社-顺风车订单列表 -->
<template>
  <div class="travel-sfc-order-list">
    <div ref="dgtools" class="filter-container">
      <div class="dgts-row">
        <el-form :model="dg.ps" :inline="true" @keyup.enter.native="getDgList">
          <el-form-item>
            <el-input v-model="dg.ps.carSeats" placeholder="座位数" style="width: 80px;">
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-input v-model="dg.ps.find" placeholder="行程详情/备注/订单号/航班号" style="width: 200px;">
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-row type="flex">
              <el-select v-model="dg.ps.timeType" placeholder="时间类型" style="width: 100px; margin-right: 2px;">
                <el-option label="开始时间" :value="0"></el-option>
                <el-option label="添加时间" :value="1"></el-option>
                <el-option label="续团时间" :value="2"></el-option>
              </el-select>

              <el-date-picker v-model="dg.ps.setime" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" style="width: 200px" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-row>
          </el-form-item>

          <el-form-item>
            <el-select v-model="dg.ps.toAscDesc" placeholder="出行日期排序" style="width: 120px;">
              <el-option label="升序" value="ASC"></el-option>
              <el-option label="降序" value="DESC"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select v-model="dg.ps.isShuttle" placeholder="接送类型" style="width: 100px;">
              <el-option label="全部" value=""></el-option>
              <el-option label="接" :value="0"></el-option>
              <el-option label="送" :value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-input v-model="dg.ps.flightNum" placeholder="航班号" style="width: 80px;">
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-input v-model="dg.ps.customers" placeholder="人数" style="width: 80px;">
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-select v-model="dg.ps.sLonlat" :multiple="false" collapse-tags placeholder="接站点" style="width: 140px;">
              <el-option v-for="o in stationList" :key="o.id" :label="o.name" :value="o.lnglat">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select v-model="dg.ps.eLonlat" :multiple="false" collapse-tags placeholder="送站点" style="width: 140px;">
              <el-option v-for="o in stationList" :key="o.id" :label="o.name" :value="o.lnglat">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select v-model="dg.ps.isGrab" placeholder="抢单状态" style="width: 100px;">
              <el-option label="全部" value=""></el-option>
              <el-option label="未抢" :value="0"></el-option>
              <el-option label="已抢" :value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select v-model="dg.ps.payWay" multiple collapse-tags placeholder="支付方式" style="width: 140px;">
              <el-option v-for="o in payWayArr" :key="o.value" :label="o.label" :value="o.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-button type="primary" icon="el-icon-search" @click="getDgList">搜索</el-button>
        </el-form>
      </div>

      <div class="dgts-row">
        <el-button type="success" icon="el-icon-edit" @click="setAdupSfcOrderMd({ state: true })">修改</el-button>
        <el-button type="info" icon="el-icon-close" @click="cancelSfcOrder">取消</el-button>
        <!-- <el-button type="danger" icon="el-icon-delete" @click="delSfcOrder">删除</el-button> -->
        <el-button type="primary" icon="el-icon-upload" @click="setImportSfcOrderMd({ state: true })">导入订单Excel</el-button>
        <el-button type="primary" icon="el-icon-s-order"
          @click="setImportSfcOrderListMd({ state: true })">导入订单列表</el-button>
        <el-button type="primary" icon="el-icon-download" @click="sfcOrderExcelDown">导入订单Excel模板下载</el-button>
        <!-- <el-button type="primary" icon="el-icon-circle-check" @click="payApply">付款申请</el-button> -->
      </div>

      <TableSelfSet v-if="dg.columns.length > 0" :tbTitle="'顺风车订单列表'" :dgName="dg.dgName" :tbId="dg.tbName"
        :srcCols="dg.srcCols" :columns="dg.columns" @saveSet="saveTbSet" />
    </div>

    <el-table :ref="dg.tbName" :data="dg.list" row-key="id" :height="bodyHeight" border fit :row-class-name="rowClassName"
      @header-dragend="dragHeader" @selection-change="selRowChange">
      <el-table-column fixed="left" type="index" label="编号" width="40" align="center"></el-table-column>
      <el-table-column fixed="left" type="selection" width="40"></el-table-column>
      <el-table-column v-for="(col, index) in dg.columns" :key="index" :class-name="dg.dgName" :prop="col.field"
        :label="col.label" :width="col.width">
        <template slot-scope="{row}">
          <template v-if="col.field == 'thanksFee'">
            {{ row.thanksFee > 0 ? row.thanksFee : '' }}
          </template>

          <template v-else-if="col.field == 'oper'">
            <span v-if="row.cusId">
              {{ row.cusId.baseUserId.realName }}
              {{ row.cusId.baseUserId.phone && `（${row.cusId.baseUserId.phone}）` }}
            </span>
          </template>

          <span v-else-if="col.field == 'orderState'">
            <span v-for="o in orderStatus" :key="o.value">{{ o.value == row.status ? o.label : '' }}</span>
          </span>

          <span v-else-if="col.field == 'payState'">
            <span v-if="row.payOrderNum" class="c-green">已支付</span>
            <span v-else class="c-red">未支付</span>
          </span>

          <span v-else-if="col.field == 'seaddress'">
            <div class="c-green">起点：{{ row.spoint.address }}</div>
            <div class="c-blue">终点：{{ row.epoint.address }}</div>
          </span>

          <span v-else-if="col.field == 'cusAndSeats'">
            <span>{{ row.customers + '人' }}/{{ row.needSeats + '座' }}</span>
          </span>

          <span v-else-if="col.field == 'setime'">
            <div class="c-green">开始：{{ row.stime | time('yyyy年MM月dd号 HH:mm') }}</div>
            <div class="c-blue">结束：{{ row.etime | time('yyyy年MM月dd号 HH:mm') }}</div>
          </span>

          <span v-else-if="col.field == 'travelBox'">
            {{ row.travelBox > 0 ? row.travelBox + '个' : '' }}
          </span>

          <span v-else-if="col.field == 'payway'">
            <span v-for="o in payWayArr" :key="o.value">{{ o.value == row.payway ? o.label : '' }}</span>
          </span>

          <span v-else-if="col.field == 'couponMoney'">
            <span>{{ row.discountDetail ? row.discountDetail.couponMoney : '' }}</span>
          </span>

          <span v-else-if="col.field == 'plateNum'">
            <span>{{ row.disCarId ? row.disCarId.plateNum : '' }}</span>
          </span>

          <span v-else-if="col.field == 'driverInfo'">
            <span>{{ (row.disCarId && row.disCarId.mainDriver) ?
              row.disCarId.mainDriver.realName + '-' + row.disCarId.mainDriver.phone : '' }}</span>
          </span>

          <template v-else>{{ getColVal(row, col.field) }}</template>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="dg.total > 0" :total="dg.total" :page.sync="dg.ps.page" :limit.sync="dg.ps.rows"
      @pagination="getDgList" />

    <AdupSfcOrder v-if="adupSfcOrderMd.state" :myData="adupSfcOrderMd" @myClick="setAdupSfcOrderMd"
      @reloadDg="getDgList" />

    <ImportSfcOrder v-if="importSfcOrderMd.state" :myData="importSfcOrderMd" @myClick="setImportSfcOrderMd" />

    <el-dialog v-el-drag-dialog="{ drag: true, full: false, resize: false }" :visible="importSfcOrderListMd.state"
      :close-on-click-modal="false" @close="importSfcOrderListMd.state = false" :title="`导入订单列表`" width="80%"
      :append-to-body="true">
      <ImportSfcOrderList :myData="importSfcOrderListMd" />
    </el-dialog>

  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog';
import DataGridBase from '@/views/mixins/DataGridBase';
import DataGridResize from '@/views/mixins/DataGridResize';
import TableSelfSet from '@/components/TableSelfSet';
import Pagination from '@/components/Pagination';
import { downFiles } from "@/api/export";

import AdupSfcOrder from './adup-sfc-order';
import ImportSfcOrder from './import-sfc-order';
import ImportSfcOrderList from './import-sfc-order-list';

import * as commonSer from '@/api/services/common.service';
import * as orderSer from '@/api/services/order.service';
import * as financeService from '@/api/services/travel/finance.service';

export default {
  mixins: [DataGridBase, DataGridResize],
  directives: { elDragDialog },
  components: { TableSelfSet, Pagination, AdupSfcOrder, ImportSfcOrder, ImportSfcOrderList },
  data() {
    let cols = [
      { label: '操作员', field: 'oper', width: 180 },
      { label: '订单状态', field: 'orderState', width: 80 },
      { label: '支付状态', field: 'payState', width: 80 },
      { label: '起点/终点', field: 'seaddress', width: 300 },
      { label: '乘车联系人', field: 'routeLink', width: 150 },
      { label: '人数/座位数', field: 'cusAndSeats', width: 100 },
      { label: '已派车辆', field: 'plateNum', width: 85 },
      { label: '驾驶信息', field: 'driverInfo', width: 130 },
      { label: '订单价格', field: 'price', width: 90 },

      { label: '订单编号', field: 'orderNum', width: 160 },
      { label: '乘客付款金额', field: 'payPrice', width: 90 },
      { label: '保障用车金额', field: 'ensureMoney', width: 90 },
      { label: '使用巴士币', field: 'shareMoney', width: 90 },
      { label: '优惠券抵扣金额', field: 'couponMoney', width: 120 },
      { label: '感谢费', field: 'thanksFee', width: 80 },

      { label: '支付方式', field: 'payway', width: 90 },
      { label: '航班/车次号', field: 'routeStationInfo.num', width: 80 },
      { label: '开始/结束时间', field: 'setime', width: 180 },
      { label: '行程详情', field: 'routeDetail', width: 300 },
      { label: '行李数', field: 'travelBox', width: 60 },
      { label: '备注', field: 'cusNote', width: 250 },
      { label: '添加时间', field: 'addTime', width: 150 }
    ];
    return {
      dg: {
        dgName: 'dg',
        tbName: 'travelSfcOrderListTb',
        total: 0,
        list: [],
        srcCols: cols,
        columns: [],
        selRows: [],
        ps: {
          page: 1, rows: 20,
          // 座位数
          carSeats: null,
          // 查询关键字 行程详情/备注/订单号
          find: null,
          // 时间类型 0开始时间 1添加时间 2续团时间
          timeType: 0,
          // 出行起止时间
          setime: [],
          // 出发时间排序 ASC-升序 DESC-降序
          toAscDesc: 'DESC',
          // 接送类型 0-接 1-送
          isShuttle: '',
          // 航班号
          flightNum: '',
          // 人数
          customers: '',
          // 起点坐标
          sLonlat: '',
          // 终点坐标
          eLonlat: '',
          // 抢单状态 1已抢 0可抢
          isGrab: '',
          // 支付方式，多个逗号拼接 eg:记账【JZ_PAY】 微信支付【WX_PAY】余额支付【BALANCE_PAY】
          payWay: [],
        },
      },

      // 站点列表
      stationList: [],

      // 订单状态
      orderStatus: [
        { value: 'NOT_DIS_CAR', label: '未派车' },
        { value: 'JL_NOT_CONFIRM', label: '已预派' },
        { value: 'DRIVER_NOT_CONFIRM', label: '师傅未确认' },
        { value: 'DRIVER_CONFIRMED', label: '师傅已确认' },
        { value: 'AL_TRAVEL', label: '已出行' },
        { value: 'COMPLETED', label: '已完成' },
      ],

      // 支付方式
      payWayArr: [
        { value: 'JZ_PAY', label: '记账' },
        { value: 'CASH_PAY', label: '现金' },
        { value: 'WX_PAY', label: '微信' },
        { value: 'ALI_PAY', label: '支付宝' },
        { value: 'BALANCE_PAY', label: '余额' },
        { value: 'MONTH_PAY', label: '月结' },
      ],

      // 修改-顺风车订单-弹框
      adupSfcOrderMd: { state: false },
      // 导入顺风车订单-弹框
      importSfcOrderMd: { state: false },
      // 导入顺风车订单列表-弹框
      importSfcOrderListMd: { state: false },

    }
  },
  created() {
    const that = this;

    that.initTbSetData(that.dg.dgName);
    that.getDgList();

    that.getStationList();
  },
  methods: {
    /**
     * 获取-接送机站点列表
     */
    getStationList() {
      const that = this;

      commonSer.getStationList({}).then(res => {
        if (res && res.code == 1) {
          let list = res.data;

          list.forEach(it => {
            that.stationList.push({
              id: it.id,                    // id
              type: it.type,                // 类型 1-飞机 2-火车
              isSta: true,                  // 是否是站点地点
              lnglat: it.mapPoint.lngLat,   // 坐标
              area: it.county,              // 区域
              name: it.name,                // 地点简写
              address: it.mapPoint.address, // 地址
              note: it.nameNote             // 站点别名
            });
          });
        }
      });
    },
    // 打开/关闭-导入顺风车订单-弹框
    setImportSfcOrderMd(e) {
      const that = this, md = that.importSfcOrderMd;

      if (e.state) {// 打开
        md.state = e.state;
      } else {// 关闭
        md.state = e.state;
        if (e.openListMd == true) {
          // 打开导出订单列表-弹框
          that.importSfcOrderListMd.state = true;
        }
      }
    },
    // 打开/关闭-导入顺风车订单列表-弹框
    setImportSfcOrderListMd(e) {
      const that = this, md = that.importSfcOrderListMd;

      md.state = e.state;
    },
    // 下载导入Excel模板
    sfcOrderExcelDown() {
      const that = this, U = that.U;

      U.qconfim('确定下载顺风车导入Excel模板吗？').then(r => {
        if (r) {
          orderSer.downImportSfcOrderExcelModel().then(res => {
            downFiles(res, '顺风车订单导入模板');
          });
        }
      });
    },
    // 获取-表格列表
    getDgList() {
      const that = this, U = that.U, dg = that.dg, ps = U.scopy(dg.ps);

      if (ps.setime && ps.setime.length == 2) {
        ps.sTime = ps.setime[0];
        ps.eTime = ps.setime[1];
      }
      delete ps.setime;

      ps.payWay = ps.payWay.join(',');

      orderSer.findSfcOrderPageList(ps).then(res => {
        if (res.code == 1) {
          let list = res.data;
          for (let i in list) { list[i].dgName = dg.dgName; }

          dg.list = list;
          dg.total = res.count;
        }
      });
    },

    // 删除
    delSfcOrder() {
      const that = this, U = that.U, rows = that.getSeledRows();

      if (rows.length !== 1) {
        U.qerror(`${rows.length == 0 ? '请' : '只能'}选择一条数据`);
      } else {
        let row = rows[0];
        U.qconfim(`确认删除所选数据吗？`).then(r => {
          if (r) {
            U.qerror('抱歉，功能完善中...');
            // orderSer.delSfcOrder({ids: row.id }).then(res => {
            //   if(res.code !== 1){
            //     U.qerror(res.msg);
            //   }else{
            //     U.qsuccess(res.msg);

            //     // 刷新列表
            //     that.getDgList();
            //   }
            // });
          }
        });
      }
    },
    // 修改
    setAdupSfcOrderMd(e) {
      const that = this, U = that.U, md = that.adupSfcOrderMd, rows = that.getSeledRows();

      if (!e.state) {
        md.obj = null;
        md.state = false;
      } else {
        if (rows.length !== 1) {
          U.qerror(`${rows.length == 0 ? '请' : '只能'}选择一条数据`);
        } else {
          let row = rows[0];
          if (row.status === 'COMPLETED') {
            U.qerror('订单已完成，不能修改');
          } else {
            md.obj = rows[0];
            md.state = true;
          }
        }
      }
    },
    // 取消
    cancelSfcOrder() {
      const that = this, U = that.U, rows = that.getSeledRows();

      if (rows.length !== 1) {
        U.qerror(`${rows.length == 0 ? '请' : '只能'}选择一条数据`);
      } else {
        let row = rows[0];
        U.qconfim(`确认取消所选数据吗？`).then(r => {
          if (r) {
            orderSer.cancelCarOrder({ oid: row.id }).then(res => {
              if (res.code !== 1) {
                U.qerror(res.msg);
              } else {
                U.qsuccess(res.msg);

                // 刷新列表
                that.getDgList();
              }
            });
          }
        });
      }
    },

    // 付款申请
    payApply() {
      const that = this, U = that.U, rows = that.getSeledRows();

      if (rows.length < 1) {
        U.qerror('请至少选择一条订单');
      } else {
        // type 订单类型 eg:顺风车单个订单【3】顺风车多个订单【4】 普通单个订单【5】普通多个订单【6】
        let ps = { type: rows.length > 1 ? 4 : 3, orderIds: rows.map(it => it.id).join(',') };
        U.qconfim(`确认为所选订单提交付款申请？`).then(r => {
          if (r) {
            financeService.orderPayApply(ps).then(res => {
              if (res.code !== 1) {
                U.qerror(res.msg);
              } else {
                U.qsuccess(res.msg);

                // 刷新列表
                that.getDgList();
              }
            });
          }
        });
      }
    },

  },
}
</script>
